// 这个组件就很牛批了（工具组件），react中的router支持三种模式
// 我们可以利用其他组件调用该组件，传入差异化的参数（参数名同，内容不同的）
// 在该组件内部进行跨层级传递，增加拓展性
import React, { Component } from "react";
import { RouterContext } from "./RouterContext";
export default class Router extends Component {
      static computeRootMatch(pathname) {
            return {
                  path: "/",
                  url: "/",
                  params: {},
                  isExact: pathname === "/",
            };
      }

      constructor(props) {
            super(props);
            this.state = {
                  location: props.history.location,
            };

            this.unlisten = props.history.listen((location) => {
                  this.setState({ location });
            });
      }

      componentWillUnmount() {
            this.unlisten();
      }

      render() {
            return (
                  <RouterContext.Provider
                        value={{
                              history: this.props.history,
                              location: this.state.location,
                              match: Router.computeRootMatch(this.state.location.pathname)
                        }}
                  >
                        {this.props.children}
                  </RouterContext.Provider>
            );
      }
}
